<template>
  <div class="simple-container">
    <div class="aside-wrap" :class="{ 'aside-hide': !aside }" :style="asideStyle">
      <div class="aside-inner" :style="asideStyle">
        <b-scrollbar>
          <slot name="aside"></slot>
        </b-scrollbar>
      </div>

      <span class="toggle-arrow" @click="toggleAside">
        <b-icon :name="aside ? 'caret-left' : 'caret-right'"></b-icon>
      </span>
    </div>
    <div class="content-wrap" :style="contentStyle">
      <slot name="content"></slot>
    </div>
  </div>
</template>

<script>
export default { name: 'SimpleContainer' }
</script>

<script setup>
import { ref, computed } from 'vue'

const props = defineProps({
  // 配置文件路径，必须，读取配置文件路径菜单的配置文件地址
  asideWidth: {
    type: String,
    default: '292px',
  },
})

const aside = ref(true)

const asideStyle = computed(() => ({ width: aside.value ? props.asideWidth : 0 }))
const contentStyle = computed(() => ({
  width: aside.value ? `calc(100% - ${props.asideWidth})` : null,
}))

function toggleAside() {
  aside.value = !aside.value
}
</script>

<style lang="stylus" scoped>
.simple-container {
  display: flex;
  width: 100%;
  height: 100%;
  .aside-wrap {
    position: relative;
    height: 100%;
    background-color: #ffffff;
    transition: width .2s cubic-bezier(0.1, 0, 0, 1) 0s;
    &:after {
      content: "";
      position: absolute;
      top: 0;
      bottom: 0;
      right: 0;
      width: 1px;
      background-color: #F4F5F5;
    }
    .toggle-arrow {
      position: absolute;
      right: -7px;
      top: 93px;
      display: flex;
      align-items: center;
      justify-content: center;
      height: 44px;
      width: 14px;
      background-color: #fff;
      border: 1px solid #e7e9e8;
      border-radius: 8px;
      box-shadow: 0 2px 8px 0 rgba(0, 0, 0, .08);
      cursor: pointer;
      will-change: top,opacity;
      transform: translateY(-50%);
      transition: top .2s ease,opacity .2s ease;
      opacity: 0;
      z-index: 1;
      > i {
        color: #8a8f8d;
        font-size: 12px;
      }
    }
    &:hover {
      .toggle-arrow {
        opacity: 1;
      }
    }
    &.aside-hide {
      .toggle-arrow {
        opacity: 1;
        border-radius: 0 8px 8px 0;
        right: -14px;
      }
    }
    .aside-inner {
      height: 100%;
      overflow: hidden;
      .top-title {
        display: flex;
        height: 36px;
        align-items: center;
        margin: 0 10px;
        border-bottom: 1px solid #EFF0F0;
        padding: 12px 0;
        font-size: 18px;
        > i {
          font-size: 22px;
          margin-right: 6px;
          line-height: 1;
        }
      }
      .aside-menu {
        height: calc(100% - 36px);
        overflow: hidden;
        user-select: none;
      }
    }
  }

  .content-wrap {
    position: relative;
    width: 100%;
    background: #ffffff;
    will-change: width;
    transition: width .2s cubic-bezier(0.1, 0, 0, 1) 0s;
    overflow-x: hidden;
  }
}
</style>
